<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wrap{width: 600px;height: 600px;background: yellow;}
		#pop{position: fixed;top:0;left:0;z-index: 9;background: url('popbg.png')}
		.error{position: fixed;top:50%;left:50%;margin:-75px 0 0 -150px;padding:80px 20px 0;width:300px;height:150px;text-align: center;background:#fff;z-index: 99;box-sizing: border-box;}
		.error h4{position: absolute;background: #f40e25;top: -21px;left: 0;width: 281px;text-align: right;padding: 10px}
		.error h4 i{display: inline-block;width: 13px;height: 13px;background:url("close.png");cursor: pointer;}
	</style>
</head>
<body>
	<div class="wrap"> </div>
	
	<script src="jquery.min.js"></script>
	<script>
		$('.wrap').on("click",function(){
			$("body").append("<div class='error'><h4><i id='close'></i></h4>我是弹出框</div>");
			$("body").append("<div id='pop'></div>");
			$("#pop").css({"width":window.innerWidth,"height":window.innerHeight});
		});
		$("body").on("click","#pop,#close",function(){
			$("#pop").remove();
			$(".error").remove();
			$(this).remove();	
		})
	</script>
</body>
</html>